/**
 * 基础菜单 商品管理
 */
<template>
  <div id="archives">
        
        <el-row>
            <div class="title">项目选择</div>
        </el-row>
        <el-row type="flex" justify="start">
            <el-col>
                <el-input class="input-width" v-model="queryList.projectName">
                    <template slot="prepend"><span class="item-pre">项目名称</span></template>
                </el-input>
                <el-button class="default-button mgl" type="primary" @click="searchQuery" icon="el-icon-search">查询</el-button>
                <el-button class="default-button mgl" type="primary" @click="clearInput" icon="el-icon-close">清空</el-button>
                <!-- <el-button class="default-button mgl" type="primary" icon="el-icon-check">确定</el-button> -->
            </el-col>
        </el-row>
        <el-row>
            <div class="table-wrapper">
              <el-table
                :data="tableData"
                border
                class="table-style"
                >
                <el-table-column
                  type="index"
                  width="50"/>
                <el-table-column
                  prop="projectName"
                  label="项目名称"
                  width="800">
                  <template slot-scope="scope">
                    <span @click="gotoDetail(scope.row)" class="cs"><i class="el-icon-tickets tickets" style="margin-right: 5px;"></i>{{ scope.row.projectName }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="projectCode"
                  label="项目编号"
                  width="251">
                </el-table-column>
                <el-table-column
                  prop="buildCompanyName"
                  width="251"
                  label="单位名称">
                </el-table-column>
                <!-- <el-table-column
                  prop="region"
                  label="所属区域">
                </el-table-column> -->
                <el-table-column
                  prop="startDate"
                  label="开工时间">
                </el-table-column>
              </el-table>
            </div>
        </el-row>
        <el-row>
          <el-pagination
            :current-page="queryList.currentPage"
            :page-size="queryList.pageSize"
            background
            @current-change="currentChange"
            style="margin-top:20px;"
            layout="prev, pager, next"
            :total="queryList.total">
          </el-pagination>
        </el-row>
        </div>
        
</template>

<script>
import { queryProject } from '../api/api'

import { RouterLink } from 'vue-router'

// import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      queryList:{
        id:0,
        projectName:"",
        currentPage:1,
        total:20,
        pageSize:10
      },
      tableData: []
    }
  },
  // 注册组件
  components: {
    // RouterLink
},
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.init()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    clearInput(){
      this.queryList = {
        id:0,
        projectName:""
      }
    },
    currentChange(page){
      this.queryList.currentPage = page
      this.init()
    },
    searchQuery(){
      this.init()
    },
    async init(){
      let data = await queryProject(this.queryList);
      this.tableData = data.list
      this.queryList.total = data.pagination.total
    },
    gotoDetail(row){
      this.$router.push({path: '/detail',query: {id:row.id}});
    },
    // 获取公司列表
    getdata(parameter) {
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.deptId = row.deptId
        this.editForm.deptName = row.deptName
        this.editForm.deptNo = row.deptNo
      } else {
        this.title = '添加'
        this.editForm.deptId = ''
        this.editForm.deptName = ''
        this.editForm.deptNo = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '公司保存成功！'
                })
              } else {
                // this.$message({
                //   type: 'info',
                //   message: res.msg
                // })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('公司保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除公司
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.deptId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '公司已删除!'
                })
                this.getdata(this.formInline)
              } else {
                // this.$message({
                //   type: 'info',
                //   message: res.msg
                // })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('公司删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          // this.$message({ 
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>

$defaultColor:#5ebedc;
$defaultBorderColor:#e4e4e4;
#archives {
  /deep/ .el-input__inner {
    height: 35px;
  }
  .cs {
    cursor: pointer;
    &:hover {
      color: #838282;
    }
  }
  .tickets {
    color: #81850a;
    :hover {
      color:#a7a6a6 ;
    }
  }
  .title {
    font-size: 22px;
    font-family: monospace;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .input-width {
    .item-pre {
      color: #696969;
    }
    width: 300px;
    color: #979797;
  }
  .mgl {
     margin-left: 5px; 
  }
  .el-button+.el-button {
    margin-left: 5px;
  }
  .default-button {
    /deep/ i {
      font-weight: 600;
    }
    padding: 10px 13px 9px 12px;
    border: 1px solid $defaultColor;
    background-color: $defaultColor;
  }
  .table-wrapper {
    margin-top: 20px;
    padding-left: 15px;
  }
  .table-style {
    width: 100%;
  }
  .el-table--border {
    border: 1px solid #cddcf1;
  }
  /deep/ .el-table thead th.el-table__cell {
    background-color: #f3f3f3;
  }
  /deep/ .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid $defaultBorderColor;
    border-bottom: 1px solid $defaultBorderColor;
    color: #484848;
    padding: 5px 0 0;
  }
  /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid $defaultBorderColor;
    color: #484848;
    padding: 5px 0 0;
  }
  /deep/ .el-table__body {
    tbody {
      tr {
        td:first-child {  
          background-color: #f3f3f3;
          text-align: center;
          color: #444444;
        }
      }
    }
  }
}

</style>

 
 